import Vue from 'vue'
import Vuex from 'vuex'
import { ApiGetList } from "@/api/index.ts"
import pinyin from 'js-pinyin'

interface listType {
  data: any[],
  code: number
}

interface ItemType {
  img: string,
  id: string,
  title: string,
  py: any
}

interface StoreType {
  title: string,
  list:any[],
  newPyList: any[]
}

Vue.use(Vuex)
// vuex全局得状态管理器

export default new Vuex.Store<StoreType>({
  // 全局得状态（数据，变量）
  state: {
    title: '1906A',
    list: [],
    newPyList: []
  },
  // 更改state得唯一方式  只能同步
  mutations: {
    CHANG_TITLE(state, data) {
      state.title = data
    },
    CHANGE_LIST(state, data) {
      const newArr = data.map((item: ItemType) => {
        return {
          ...item,
          py: pinyin.getCamelChars(item.title)[0]
        }
      })

      const sortArr = newArr.sort((a: ItemType, b: ItemType) => {
        // 排序 转码  charCodeAt：将字母转换编码
        return a.py.charCodeAt() - b.py.charCodeAt()
      })

      // 将 py提取出来  [A,A,B,C,C,C,D,D,D]
      const pyList = sortArr.map((item: ItemType) => item.py)

      // 将获取到py去重 [A,B,C,D] 
      state.newPyList = [...new Set(pyList)]

      const arr = state.newPyList.map((item) => {
        return {
          index: item,
          children: sortArr.filter((val: ItemType) => val.py === item)
        }
      })

      state.list = arr

      // state.list = arr
    }
  },
  // 异步  如果action要修改state要通过mutation
  actions: {
    getList(context, data) {
      // context vuex实例 可以拿到commit dispatch 等
      // 请求数据
      ApiGetList().then((res: listType) => {
        context.commit('CHANGE_LIST', res.data)
      })
    }
  },
  // 将vuex分成模块，每个模块都有自己得state,mutation,action
  modules: {
  },
  // state得计算属性
  getters: {
  }
})

